<template>
	<view class="cu-form-group">
		<view class="grid grid-square flex-sub" :class="['col-' + col]">
			<view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage" :data-url="item.path">
				<image :src="item.path" mode="aspectFill"></image>
				<view class="cu-tag bg-red" v-if="!item.loading || item.loading == '100%'" @tap.stop="DelImg"
					:data-index="index">
					<text class="cuIcon-close"></text>
				</view>
				<view class="progress-mask flex justify-center align-center padding-lr-sm" v-else>
					<view class="cu-progress bg-mask round xs">
						<view class="bg-white" :style="{ width: item.loading }"></view>
					</view>
				</view>
				<view class="progress-mask flex justify-center align-center text-white" v-if="item.error"
					@tap.stop="DelImg" :data-index="index">
					<text class="cuIcon-roundclose"></text>
				</view>
			</view>
			<view class="img-160" @tap="ChooseImage" v-if="imgList.length < max">
				<!-- <text class="cuIcon-cameraadd"></text> -->
				<image :src="require('./static/camera.png')" mode="aspectFill" class="img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * @alias 刘欢
	 * @description 图片上传组件
	 * @param {Number,String} col - 每行展示几个
	 * @param {Number,String} max - 最大上传张数
	 * @param {Array} defData - 默认数据,回显
	 * @event {Function()} change - 上传回调,返回图片id
	 * @example <fu-upload col="4" max="8" @change="handleImageUpload"></fu-upload>
	 * */
	import {
		UPLOAD_IMAGE_URL
	} from "@/common/config.js";
	export default {
		props: {
			col: {
				type: [Number, String],
				default: 4,
			},
			max: {
				type: [Number, String],
				default: 8,
			},
			defData: {
				type: Array,
				default () {
					return [];
				},
			},
		},
		data() {
			return {
				imgList: this.defData,
				loadUrl: UPLOAD_IMAGE_URL,
				count: 0, // 记录选择的图片张数,
			};
		},
		computed: {
			previewList() {
				return this.imgList.map((item) => {
					return item.path;
				});
			},
		},
		created() {
			console.log(this.defData,'=============');
		},
		methods: {

			// 选择图片
			ChooseImage() {
				uni.chooseImage({
					count: this.max - this.imgList.length,
					sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						uni.showLoading({
							title: '上传中'
						})
						this.count = res.tempFilePaths.length;
						const data = res.tempFilePaths.map((item) => {
							let data = {
								path: item,
								loading: "0%",
								task: null,
								error: false,
								id: null,
							};
							this.uploadImage(data);
							return data;
						});
					},
					fail: (error) => {
						this.videoList.error = true
						console.log("error: " + JSON.stringify(error));
					},
				});
			},
			// 上传图片
			uploadImage(data) {
				let that = this
				const uploadTask = uni.uploadFile({
					url: this.loadUrl,
					filePath: data.path,
					name: "file",
					formData: {
						module: "",
						dir: "",
					},
					success: (uploadFileRes) => {
						uni.hideLoading()
						const response = JSON.parse(uploadFileRes.data);
						if (response.code == 1) {
							data.end = true;
							data.task = null;
							data.url = response.data[0].path;
							data.id = response.data[0].id;
							that.imgList = that.imgList.concat(data);
						} else {
							data.end = true;
							data.task.abort();
							data.task = null;
							data.error = true;
							uni.showToast({
								icon: "none",
								title: response.msg,
							});
						}
						this.count--;
						if (this.count === 0) {
							this.handleChange();
						}
					},
					fail: (error) => {
						uni.hideLoading()
						data.end = true;
						data.task.abort();
						data.task = null;
						data.error = true;
						uni.showToast({
							icon: "none",
							title: this.i18n["上传失败,请检查网络设置"],
						});
						console.log("error: " + JSON.stringify(error));
					},
				});
				data.task = uploadTask;
				uploadTask.onProgressUpdate((res) => {
					data.loading = res.progress + "%";
				});
			},
			// 预览图片
			ViewImage(e) {
				uni.previewImage({
					urls: this.previewList,
					current: e.currentTarget.dataset.url,
				});
			},
			// 删除图片
			DelImg(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1);
				this.handleChange();
			},
			// 触发change事件
			handleChange() {
				let _imgs = this.imgList.map((item) => {
					if (item.error) {
						return "";
					} else {
						return item;
					}
				});
				this.$emit("change", _imgs);
			},
		},
	};
</script>
<style>
	.cu-tag02 {
		z-index: 99;
	}
</style>
<style lang="scss" scoped>
	.progress-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 10;
	}

	.img-160 {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
		position: relative;

		.img {
			width: 160rpx;
			height: 160rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>
